<template>
  <section class="base-dialog-container">
    <el-dialog
      v-loading="loading"
      :title="title"
      :width="width"
      :visible.sync="dialogVisible"
    >
      <slot name="body"></slot>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="showCancel" @click="handleCancel" size="small" plain
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          v-for="(item, index) in buttons"
          :key="index"
          @click="handleConfirm(item)"
          >{{ item.text }}
        </el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
  // 基础对话框
  name: "baseDialog",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "600px",
    },
    title: {
      type: String,
      default: "新建",
    },
    showCancel: {
      type: Boolean,
      default: true,
    },
    buttons: {
      type: Array,
      default() {
        return [
          {
            text: "保存并新建",
            type: "Submit",
            keepAlive: true,
          },
          {
            text: "保存",
            type: "Submit",
          },
        ];
      },
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleCancel() {
      this.dialogVisible = false;
    },
    handleConfirm(btn) {
      this.$emit("handleConfirm", btn);
    },
  },
};
</script>

<style lang="scss">
.base-dialog-container {
  .el-input,
  .el-textarea,
  .el-cascader,
  .el-select {
    max-width: 300px;
    width: 100%;
  }
}
</style>
